<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">你向平台借了五百块<br/>下个月就把钱还上<br/>但是这一个月<br/>你并不好过</span>
      <span v-show="show1" class="span2 word">“上个月过得太煎熬了”<br/>你以后再也不敢乱花钱了<br/>你开始学着记账<br/>不敢冲动消费了</span>
      <span v-show="show1" class="span3 word">许多年过去了<br/>你已经出来就业了<br/>为了能早日供车上楼<br/>你在这座城市辛苦地打拼着</span>
      <span v-show="show1" class="span4 word">那天<br/>你收到了一个电话<br/>来电显示的是<br/>“某支付软件客服”</span>
      <span v-show="show1" class="span5 word">“喂您好<br/>请问您是xxx先生吗?<br/>我是某支付软件的工作人员”</span>
      <span v-show="show1" class="span6 word">“这边跟您核实一下您的信息<br/>您所毕业的学校是……<br/>专业是…… 身份证号码是……<br/>您在XXXX年的XX月XX日<br/>在我们平台进行过一笔贷款业务吗?”</span>
      <span v-show="show1" class="span7 word">你楞了一下<br/>客服居然知道我这么多的信息<br/>应该是真的吧<br/>回想起当年那次贷款<br/>“嗯 是的”</span>
      <span v-show="show1" class="span8 word">“是这样的先生<br/>我们平台这边可以帮您办理注销<br/>就是帮您注销您之前的贷款记录<br/>如果不办理的话这个记录会影响您的征信记录<br/>对您以后买车买房都会有影响的”</span>
      <span v-show="show1" class="span9 word">听到这<br/>你突然紧张起来<br/>询问怎么才能注销呢?</span>
      <span v-show="show1" class="span10 word">你加了客服的QQ<br/>她让你下载了某借贷平台APP<br/>按照步骤输入个人信息<br/>准备开始申请贷款</span>
      <span v-show="show1" class="span11 word">客服说这样做的目的是<br/>要将贷款转给他们的对公账户<br/>他们去操作注销账户<br/>钱只是走一遍流水<br/>当天就会返还到你的账户里</span>
      <span v-show="show1" class="span12 word">听到要贷款<br/>你的选择是</span>
      <el-button v-show="show2" class="button" v-on:click="A">A 不管了最重要是注销记录</el-button>
      <el-button v-show="show2" class="button" v-on:click="B">B 先冷静一下</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 36000)
      setTimeout(() => {this.show2 = true}, 36000)
    },
    A() {
      this.$router.push("/learn/scene1-6")
    },
    B() {
      this.$router.push("/learn/scene1-7")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 150px;
}

.span2{
  top: 150px;
  animation-delay: 3s;
}

.span3{
  top: 150px;
  animation-delay: 6s;
}

.span4{
  top: 150px;
  animation-delay: 9s;
}

.span5{
  top: 180px;
  animation-delay: 12s;
}

.span6{
  top: 120px;
  animation-delay: 15s;
}

.span7{
  top: 120px;
  animation-delay: 18s;
}

.span8{
  top: 120px;
  animation-delay: 21s;
}

.span9{
  top: 180px;
  animation-delay: 24s;
}

.span10{
  top: 150px;
  animation-delay: 27s;
}

.span11{
  top: 120px;
  animation-delay: 30s;
}

.span12{
  top: 210px;
  animation-delay: 33s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}

@keyframes move2 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>